<script setup lang="ts">
defineOptions({
    name: 'cs-artificial',
});

interface KeFuMessageRespVO {
    id: number; // 编号
    conversationId: number; // 会话编号
    senderId: number; // 发送人编号
    senderAvatar: string; // 发送人头像
    senderType: number; // 发送人类型  1：用户 2：管理员
    receiverId: number; // 接收人编号
    receiverType: number; // 接收人类型
    contentType: number; // 消息类型
    content: string; // 消息
    readStatus: boolean; // 是否已读
    createTime: number; // 创建时间
}

const inputMessage = ref('');
const messagesContainer = ref(null);
const sending = ref(false);

const messageList = ref<KeFuMessageRespVO[]>([
    {
        id: 90,
        conversationId: 7,
        senderId: 286,
        senderAvatar: '',
        senderType: 1,
        receiverId: 1,
        receiverType: 1,
        contentType: 1,
        content:
            '你好，我是王老吉！你好，我是王老吉！你好，我是王老吉！你好，我是王老吉！你好，我是王老吉！你好，我是王老吉！你好，我是王老吉！你好，我是王老吉！你好，我是王老吉！你好，我是王老吉！',
        readStatus: true,
        createTime: 1745392467000,
    },
    {
        id: 89,
        conversationId: 7,
        senderId: 286,
        senderAvatar: '',
        senderType: 2,
        receiverId: 1,
        receiverType: 2,
        contentType: 1,
        content: '789',
        readStatus: true,
        createTime: 1745392396000,
    },
]); // 消息列表

// 按照时间倒序，获取消息列表
const getMessageListReverse = computed(() => {
    messageList.value.sort((a: any, b: any) => a.createTime - b.createTime);
    return messageList.value;
});


// 用户消息
const isUserMessage = (msg: KeFuMessageRespVO) => {
    return msg.senderType === 1;
};

function sendMessage() {}
</script>

<template>
    <div class="max-w-full md:w-[1100px] h-[600px] bg-white rounded-xl overflow-hidden flex flex-col">
        <div ref="messagesContainer" class="flex-1 overflow-y-auto p-4 space-y-4">
            <!-- 消息项 -->
            <div
                v-for="msg in getMessageListReverse"
                :key="msg.id"
                class="flex items-start gap-3"
                :class="{
                    'justify-start': isUserMessage(msg),
                    'justify-end': !isUserMessage(msg),
                }"
            >
                <!-- 头像 -->
                <el-avatar v-if="isUserMessage(msg)" :src="msg.senderAvatar" class="shrink-0" />
                <div
                    class="max-w-[75%] rounded-lg p-3"
                    :class="{
                        'bg-blue-500 text-white': isUserMessage(msg),
                        'bg-gray-100': !isUserMessage(msg),
                    }"
                >
                    {{ msg.content }}
                </div>
                <el-avatar v-if="!isUserMessage(msg)" :src="msg.senderAvatar" class="shrink-0" />
            </div>
        </div>

        <!-- 消息输入区域 -->
        <div class="border-t p-4">
            <div class="relative">
                <el-input
                    v-model="inputMessage"
                    type="textarea"
                    :rows="3"
                    placeholder="输入消息..."
                    @keydown.enter.exact.prevent="sendMessage"
                    class="pr-20"
                />
                <el-button type="primary" class="absolute bottom-2 right-2" @click="sendMessage" :loading="sending"> 发送 </el-button>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped></style>
